<template>
  <q-page padding>
    <div class="items-center row q-gutter-md" style="margin-bottom: 10px">
      <q-input
        outlined
        dense
        style="width: 20%"
        v-model="queryParams.org_code"
        label="组织编码"
      />
      <q-input
        outlined
        dense
        style="width: 20%"
        v-model="queryParams.org_name"
        label="组织名称"
      />
      <q-select
        outlined
        dense
        emit-value
        map-options
        style="width: 20%"
        v-model="queryParams.org_level"
        label="组织层级"
        :options="dictOptions.orgLevel"
      />
      <q-btn color="primary" @click="handleSearch" :label="$t('Search')" />
      <q-btn color="primary" @click="resetSearch" :label="$t('Reset')" />
    </div>
    <q-space />
    <dc-hierarchy
      separator="cell"
      dense
      :columns="columns"
      :data="orgTree"
      :loading="loading"
    >
      <template v-slot:body="props">
        <dc-tree-td :treeTd="props" firstTd="sort"></dc-tree-td>
        <td class="text-center">
          {{ props.item.org_code }}
        </td>
        <td class="text-center">
          {{ props.item.org_name }}
        </td>
        <td class="text-center">
          <DcDictCell dictName="orgLevel" :dictCode="props.item.org_level" />
        </td>
        <td class="text-center">
          {{ props.item.eda_id }}
        </td>
        <td class="text-center">
          {{ props.item.eda_code }}
        </td>
        <!-- 组织正职 -->
        <td class="text-center"></td>
        <!-- 组织副职 -->
        <td class="text-center"></td>
        <td class="text-center">
          <div class="q-gutter-xs">
            <!-- TODO： relateRole-->
            <q-btn
              dense
              color="negative"
              @click="showOrgRoleDialog(props.item)"
              :label="$t('Relate') + $t('Role')"
            />
          </div>
        </td>
      </template>
      <template v-slot:loading>
        <q-inner-loading :showing="loading">
          <q-spinner-gears size="50px" color="primary" />
        </q-inner-loading>
      </template>
    </dc-hierarchy>
    <OrgRoleDialog ref="orgRoleDialog" @handleFinish="handleFinish" />
  </q-page>
</template>

<script setup>
import useTableData from "src/composables/useTableData";
import { computed, unref, onMounted, ref, toRefs } from "vue";
import { useI18n } from "vue-i18n";
import { FormatDateTime } from "src/utils/date";
import { ArrayToTree } from "src/utils/arrayAndTree";
import OrgRoleDialog from "./OrgRoleDialog.vue";
import DcHierarchy from "src/components/DcHierarchy/DcHierarchy.vue";

const { t } = useI18n();
const url = {
  list: "org/get-org-list",
};
const columns = computed(() => {
  return [
    { name: "sort", align: "center", label: t("Sort"), field: "sort" },
    {
      name: "org_code",
      align: "center",
      label: t("Org") + t("Code"),
      field: "org_code",
    },
    {
      name: "org_name",
      align: "center",
      label: t("Org") + t("Name"),
      field: "org_name",
    },
    {
      name: "org_level",
      align: "center",
      label: t("Org") + t("Level"),
      field: "org_level",
    },
    {
      name: "eda_id",
      align: "center",
      label: "EdaId",
      field: "eda_id",
    },
    {
      name: "eda_code",
      align: "center",
      label: "EdaCode",
      field: "eda_code",
    },
    {
      name: "manager",
      align: "center",
      label: "组织正职",
      field: "manager",
    },
    {
      name: "vice_manager",
      align: "center",
      label: "组织副职",
      field: "vice_manager",
    },
    { name: "actions", align: "center", label: t("Actions"), field: "actions" },
  ];
});

const {
  pagination,
  DcDictCell,
  queryParams,
  dictOptions,
  tableData,
  loading,
  recordDetailDialog,
  showAddForm,
  showEditForm,
  getTableData,
  handleFinish,
  handleSearch,
  resetSearch,
  handleDelete,
} = useTableData(url);

onMounted(() => {
  pagination.value.rowsPerPage = 99999;
  getTableData();
});

const orgTree = computed(() => {
  if (tableData.value.length !== 0) {
    const mt = ArrayToTree(tableData.value, "org_code", "parent_code");
    return mt;
  }
  return [];
});

const orgRoleDialog = ref(null);
const showOrgRoleDialog = (row) => {
  orgRoleDialog.value.show(row);
};
const showDateTime = computed(() => {
  return (datetime) => {
    return FormatDateTime(datetime);
  };
});
</script>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "OrgComp",
});
</script>
